<template>
    <div>
        <el-dialog v-model="state.dialog.show" title="新增存储策略" width="769px">
            <el-form ref="dialogFormRef" :model="state.form" :rules="state.rules" label-width="120px"
                     size="default">
                <el-row :gutter="35">
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="存储策略名" prop="name">
                            <el-input v-model="state.form.name" clearable
                                      placeholder="请输入存储策略名"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="策略类型" prop="type">
                            <el-select v-model="state.form.type" class="w100" placeholder="请选择策略类型">
                                <el-option v-for="(item,index) in state.storageTypes" :key="index"
                                           :disabled="item.type==='local'" :label="item.name"
                                           :value="item.type"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="AccessKey" prop="config.accessKey">
                            <el-input v-model="state.form.config.accessKey" clearable
                                      placeholder="云服务后台获取，需要有对象存储权限"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="AccessSecret" prop="config.accessSecret">
                            <el-input v-model="state.form.config.accessSecret" type="password" clearable
                                      placeholder="云服务后台获取，需要有对象存储权限"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="Endpoint协议" prop="config.endpointProtocol">
                            <el-select v-model="state.form.config.endpointProtocol" class="w100"
                                       placeholder="对象存储服务器的协议，一般是https">
                                <el-option label="HTTP" value="http"></el-option>
                                <el-option label="HTTPS" value="https"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="Endpoint" prop="config.endpoint">
                            <el-input v-model="state.form.config.endpoint" clearable
                                      placeholder="对象存储服务器的域名地址，不要带协议"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="Bucket" prop="config.bucket">
                            <el-input v-model="state.form.config.bucket" clearable
                                      placeholder="先去管理后台新建存储桶，再来填写"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="Region" prop="config.region">
                            <el-input v-model="state.form.config.region" clearable
                                      placeholder="多数情况填写：Auto"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="访问协议" prop="config.accessProtocol">
                            <el-select v-model="state.form.config.accessProtocol" class="w100"
                                       placeholder="访问文件使用的协议">
                                <el-option label="HTTP" value="http"></el-option>
                                <el-option label="HTTPS" value="https"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="上传目录" prop="config.dirName">
                            <el-input v-model="state.form.config.dirName" clearable
                                      placeholder="文件在存储桶中的目录名，不填则上传到根目录"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="PathStyle" prop="config.enablePathStyleAccess">
                            <el-select v-model="state.form.config.enablePathStyleAccess" class="w100"
                                       placeholder="这里多数情况选择TRUE">
                                <el-option label="TRUE" :value="true"></el-option>
                                <el-option label="FALSE" :value="false"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
                        <el-form-item label="文件访问域名" prop="config.domain">
                            <el-input v-model="state.form.config.domain" clearable
                                      placeholder="使用自定义域名时必填"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
				<span class="dialog-footer">
					<el-button size="default" @click="onCancel">取 消</el-button>
					<el-button size="default" type="primary" @click="onSubmit">新 增</el-button>
				</span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import {reactive, ref} from 'vue';
import {storageApi} from "/@/api/storage";
import stores from "/@/stores";

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

// 定义变量内容
const dialogFormRef = ref();
const state = reactive<DialogState<StorageAddDto, { storageTypes: Array<StorageType> }>>({
    form: {
        config: {
            accessKey: "",
            accessProtocol: "https",
            accessSecret: "",
            bucket: "",
            dirName: "",
            domain: "",
            enablePathStyleAccess: true,
            endpoint: "",
            endpointProtocol: "https",
            region: "Auto"
        }, name: "",
        type: "s3"
    },
    storageTypes: [],
    dialog: {
        show: false
    },
    rules: {
        "name": [{required: true, message: "请输入存储策略名", trigger: 'blur'}],
        "type": [{required: true, message: "请选择策略类型", trigger: 'blur'}],
        "config.accessKey": [{required: true, message: "请输入AccessKey", trigger: 'blur'}],
        "config.accessSecret": [{required: true, message: "请输入AccessSecret", trigger: 'blur'}],
        "config.endpointProtocol": [{required: true, message: "请选择对象存储服务器使用的协议", trigger: 'change'}],
        "config.endpoint": [{required: true, message: "请输入对象存储服务器的域名地址", trigger: 'blur'}],
        "config.bucket": [{required: true, message: "请输入Bucket名", trigger: 'blur'}],
        "config.region": [{required: true, message: "请输入Region", trigger: 'blur'}],
        "config.accessProtocol": [{required: true, message: "请选择访问文件使用的协议", trigger: 'change'}],
        "config.dirName": [{required: true, message: "请输入上传目录名", trigger: 'blur'}],
        "config.enablePathStyleAccess": [{required: true, message: "请选择路径风格", trigger: 'change'}],
        "config.domain": [{required: true, message: "请输入文件访问时使用的域名", trigger: 'blur'}],
    }
});

// 打开弹窗
const openDialog = async () => {
    state.storageTypes = await storageApi.listTypes();
    state.dialog.show = true;
};
// 关闭弹窗
const closeDialog = () => {
    state.dialog.show = false;
};
// 取消
const onCancel = () => {
    closeDialog();
};
// 提交
const onSubmit = () => {
    dialogFormRef.value?.validate((isValid: boolean) => {
            if (isValid) {
                stores.commonStoreState.openLoading()
                storageApi.addStorage(state.form).then(() => {
                    closeDialog();
                    emit('refresh');
                    dialogFormRef.value?.resetFields();
                }).finally(() => {
                    stores.commonStoreState.closeLoading()
                })
            }
        }
    )
};

// 暴露变量
defineExpose({
    openDialog,
});
</script>
